



// **************
// Theme
// **************

#gn-components-theme(@theme-vars) {
    .gn-upload-dataset {
        .background-color-var(@theme-vars[main-variant-bg]);
        .gn-main-event-container {
            .background-color-var(@theme-vars[main-variant-bg]);
        }
    }
    .gn-upload-card,
    .gn-upload-list {
        .background-color-var(@theme-vars[main-bg]);
    }
    .gn-dropzone-active {
        .border-color-var(@theme-vars[success]);
    }
    .gn-upload-card {
        .border-bottom-color-var(@theme-vars[main-border-color]);
    }
    .gn-upload-list-header {
        .border-bottom-color-var(@theme-vars[main-border-color]);
    }
    .gn-upload-card-progress {
        .background-color-var(@theme-vars[main-variant-bg]);
    }
    .gn-upload-card-progress > div {
        .background-color-var(@theme-vars[success]);
    }
    .gn-upload-card-progress.waiting > div {
        .background-color-var(@theme-vars[warning]);
    }
    .gn-upload-card-progress.invalid,
    .gn-upload-card-progress.invalid > div {
        .background-color-var(@theme-vars[danger]);
    }
    .gn-upload-card-error, .gn-failed-upload .fa-exclamation {
        .color-var(@theme-vars[danger]);
    }
    .gn-upload-card-error-message {
        .color-var(@theme-vars[danger]);
    }
    .gn-upload-error-inline {
        > span, > i {
            .color-var(@theme-vars[danger]);
        }
    }
    .gn-upload-card {
        &.gn-upload-url {
            .gn-upload-card-bottom {
                .Select {
                    .Select-value-label {
                        .color-var(@theme-vars[badge-color]);
                        .background-color-var(@theme-vars[badge-bg]);
                    }
                }
            }
        }
    }
}

// **************
// Layout
// **************

.gn-upload-dataset {
    position: relative;
    width: 100%;
    height: 100%;
    border-width: 0.25rem;
    border-style: dashed;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: transparent;
    ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
        li {
            padding: 0;
            margin: 0;
        }
    }
    .gn-main-event-container {
        margin: 1rem;
        width: ~"calc(100% - 1rem)";
        height: ~"calc(100% - 1rem)";
        .gn-main-event-content {
            width: 100%;
            padding: 3rem;
        }
    }

}

.gn-upload-list {
    position: relative;
    max-height: 500px;
    height: 100%;
    width: 300px;
    display: flex;
    flex-direction: column;
    border-radius: 0.2rem;
    margin: 1rem;
    margin-right: 0;
    .shadow-soft();
    ul {
        flex: 1;
        overflow: auto;
    }
    .gn-upload-list-header {
        &.document {
            display: flex;
            .add-url {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .btn {
            width: 100%;
            text-align: left;
            > span {
                margin-left: 0.25rem;
            }
        }
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }
    .gn-upload-list-footer {
        padding: 0.25rem;
        text-align: center;
        .alert {
            word-break: break-word;
        }
    }
}

.gn-upload-card {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    .gn-upload-card-header {
        display: flex;
        white-space: nowrap;
        align-items: center;
        padding: 0.5rem;
        > .gn-upload-card-title {
            flex: 1;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .gn-upload-card-error {
            padding-right: 0.5rem;
        }    
    }
    &.gn-upload-url {
        .gn-upload-card-header {
            display: flex;
            flex-direction: column;
            align-items: start;
            .gn-upload-input {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }
        }
        .gn-upload-card-bottom {
            flex-direction: column;
            align-items: flex-start;
            .Select {
                &.is-disabled {
                    .Select-control {
                        background: transparent;
                        cursor: not-allowed;
                    }
                }
                .Select-control {
                    width: 70px;
                    border-left: none;
                    border-top: none;
                    border-right: none;
                }
                .Select-menu-outer {
                    width: auto;
                    font-size: 0.7rem;
                    font-weight: normal;
                    line-height: 0.8rem;
                }
                input {
                    max-width: 30px;
                }
                .Select-placeholder,
                .Select-value {
                    padding: 0 0.25rem;
                }
                .Select-input {
                    padding-left: 0.25rem;
                }
                .Select-value-label {
                    padding: 3px 7px;
                    border-radius: 10px;
                    font-size: 0.7rem;
                    font-weight: normal;
                    line-height: 0.8rem;
                }
            }
        }   
    }
    .gn-upload-card-body {
        padding: 0 0.5rem;
        font-size: @font-size-sm;
    }
    .gn-upload-card-date {
        font-size: @font-size-sm;
        display: flex;
        justify-content: space-between;
    }
    .gn-upload-card-footer {
        padding: 0 0.5rem;
        padding-bottom: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 2.4rem;
    }

    .gn-upload-card-error-message {
        padding: 0.25rem 0.5rem;
        cursor: pointer;
    }

    ul {
        display: flex;
        flex-wrap: wrap;
        li + li {
            margin-left: 0.25rem;
        }
        .badge {
            font-size: 0.7rem;
            font-weight: normal;
        }
    }
}

.gn-upload-processing {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .gn-upload-processing-header {
        margin: 1.0rem;
    }

    .gn-upload-processing-list {
        flex: 1;
        position: relative;
        width: 100%;
        overflow: auto;
        .gn-upload-card {
            margin: 1.0rem;
            margin-top: 0;
            .shadow-soft();
            border: none;
            .gn-upload-card-title {
                font-size: @font-size-lg;
            }
        }
    }
}

.gn-upload-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem 0.5rem;
}

.gn-disabled-upload {
    .btn {
        pointer-events: none;
    }
}

.gn-failed-upload {
    display: inline-block;
}
